<template>
	<view>
		<scroll-view class="index_con" scroll-y="true">
			<view>
				<view class="index_top" style="background-color: #fff;padding-bottom: 20rpx;">
					<view class="index_seach">
						<view class="con">
							<view class="icon">
								<image src="../../static/images/index_i1.png" mode="widthFix"></image>


							</view>
							<view>
								<input type="text" v-model="keywords" placeholder="请输入关键字">
							</view>
							<view class="right">
								<text @click="Seach()">搜索</text>
							</view>
						</view>
					</view>
				</view>

				<view class="index_list">
					<navigator :url="'/pages/index/shopinfo?id=' + item.id" hover-class="none"
						v-for="(item,i) in listinfo.items" :key="i">
						<view class="item">
							<view class="con">
								<view class="pic" v-if="item.logo" :style="{backgroundImage: 'url('+ item.logo +')'}">
								</view>
								<view class="pic" v-else
									style="background-image: url('http://bylm.zxinvest.cn/storage/uploads/202406/17177268738347.jpg')"></view>
									<view class="text">
										<text class="h4">{{item.name}}</text>
										<!-- <text class="p">商户号：{{item.merchantno}}</text> -->
									</view>
									<view class="link">商户详情</view>
								</view>
							</view>
					</navigator>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listinfo: [],
				keywords: '',
			}
		},
		onLoad() {
			let that = this;
			that.GetShopList();
		},
		methods: {
			Seach: function() {
				this.GetShopList();
			},

			GetShopList: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let _data = {
					keywords: that.keywords
				};
				that.common.http('GET', 'merchant', _data, function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.listinfo = res.data
				});
			},
		}
	}
</script>

<style scoped>
	.index_seach input {
		font-size: 28rpx;
	}

	.index_icon_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 26rpx;
		margin-top: 40rpx;
	}

	.index_icon_list .item {
		display: block;
		width: 20%;
		text-align: center;
		text-decoration: none;
	}

	.index_icon_list image {
		width: 86rpx;
		height: auto;
		vertical-align: middle;
	}

	.index_icon_list text {
		display: block;
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #333333;
	}



	.index_list {
		padding: 0 26rpx;
		margin-top: 20rpx;
		padding-bottom: 2rpx;
	}

	.index_list .item {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 20rpx;
		border-radius: 8px;
		overflow: hidden;
	}

	.index_list .item .con {
		padding-left: 90rpx;
		height: 90rpx;
		padding-right: 138rpx;
		position: relative;
	}

	.index_list .item .con .pic {
		position: absolute;
		left: 0;
		background-size: contain;
		top: 0;
		background-position: center;
		background-repeat: no-repeat;
		width: 90rpx;
		height: 90rpx;
	}

	.index_list .item .con .pic image {
		width: 100%;
		height: auto;
	}

	.index_list .text {
		padding: 2rpx 0;
		padding-left: 20rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index_list .text .h4 {
		display: block;
		font-size: 32rpx;
		color: #333;
	}

	.index_list .text .p {
		font-size: 26rpx;
		color: #666;
	}

	.index_list .link {
		width: 138rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 24rpx;
		color: #333;
		height: 48rpx;
		line-height: 46rpx;
		border-radius: 50px;
		border: 1px solid #eaeaea;
	}
</style>